import React, { useEffect, useState, useContext, useRef } from 'react';
import { Form, Input, Select, DatePicker } from "antd";
import { staffRule } from '@/utils/rules';
import { mapData } from '@/utils/mapData';
import moment from "moment";
import 'dayjs/locale/zh-cn';
import local from "antd/es/locale/zh_CN"

const EditableContext = React.createContext(null);

export const EditableRow = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
        <Form form={form} component={false}>
            <EditableContext.Provider value={form}>
                <tr {...props} />
            </EditableContext.Provider>
        </Form>
    );
};

export const EditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    type,
    ...restProps
}) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);
    useEffect(() => {
        if (editing) {
            inputRef.current.focus();
        }
    }, [editing]);
    const toggleEdit = () => {
        setEditing(!editing);
        form.setFieldsValue({
            [dataIndex]: record[dataIndex],
            onboardingTime: moment(record.onboardingTime),
            date: moment(record.date),
            startTime: moment(record.startTime),
            createTime: moment(record.createTime)
        });
    };
    let childNode = children;
    const getOptions = (arr) => {
        const arrs = arr.map((el, index) => {
            return {
                value: index,
                label: el
            }
        })
        return arrs;
    }
    const _sendBeforeCheck = async () => {
        try {
            const EditingData = await form.validateFields([dataIndex]);
            setEditing(!editing);
            if (record[dataIndex] === EditingData[dataIndex]) return;
            handleSave({
                _id: record._id,
                updateVal: EditingData,
                type: dataIndex
            });
        } catch (errInfo) {
            setEditing(!editing)
        }
    }
    const chooSeChildren = {
        SelectorIndex: () => {
            return (
                <Select ref={inputRef} onBlur={_sendBeforeCheck} options={getOptions(mapData[dataIndex])} defaultValue={record[dataIndex]}></Select>
            )
        },
        InputIndex: () => {
            return <Input ref={inputRef} onPressEnter={_sendBeforeCheck} onBlur={_sendBeforeCheck} />;
        },
        dateIndex: () => {
            return <DatePicker
                locale={local.DatePicker}
                ref={inputRef}
                onBlur={_sendBeforeCheck}
                onChange={_sendBeforeCheck}></DatePicker>
        }
    }
    if (editable) {
        childNode = editing ? (
            <Form.Item
                style={{
                    margin: 0,
                }}
                name={dataIndex}
                rules={staffRule[dataIndex]}
            >
                {chooSeChildren[type]()}
            </Form.Item>
        ) : (
            <div
                className="editable-cell-value-wrap"
                style={{
                    paddingRight: 24,
                }}
                onClick={toggleEdit}
            >
                {children}
            </div>
        );
    }
    return <td {...restProps}>{childNode}</td>;
};